<template>
  <div class="product">
    <div class="pc-pic">
      <div
        v-for="(item, index) in arrays[0]"
        :key="item.id"
        :class="currentIndex == index ? 'current' : ''"
        @mouseover="changeIndex(1)"
        @mouseout="changeIndexBack(1)"
      >
        <img :src="cover" alt="" v-show="!showimg1" />
        <img :src="pic" alt="" v-show="showimg1" />
      </div>
      <ul class="pt-co">
        <li
          @click="change(index)"
          :class="currentIndex == index ? 'active' : ''"
          :key="item.id"
          v-for="(item, index) in arrays[0]"
          :style="`background-color: ${c}`"
        ></li>
      </ul>
    </div>
    <div class="pc-detail">
      <p
        v-for="(item, index) in arrays[0]"
        :key="item.id"
        :class="currentIndex == index ? 'current' : ''"
      >
        {{ item.color_num }}
      </p>
      <div>
        <span>{{ title }}</span>
        <span>{{ modul }}</span>
        <span>{{ price }}</span>
      </div>
    </div>
    <div class="btn">
      <el-button type="info" style="background-color: #000" @click="$router.push(`/product/details/${pid}`)"
        >加入购物车</el-button
      >
      
      <el-button type="danger" plain>在线试妆</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["cover", "title", "modul", "price", "c", "color", "pic","pid"],
  data() {
    return {
      showimg1: false,
      showimg2: false,
      currentIndex: 0,
      arrays: [
        [
          {
            c: "#fbceb1",
            pic: "https://sdcdn.io/mac/cn/mac_sku_MYH211_1x1_0.png?width=1080&height=1080",
            pic2: "https://sdcdn.io/mac/cn/mac_sku_MYH211_1x1_1.png?width=1080&height=1080",
            color_num: "N12",
          },
          {
            c: "#f3c5a1",
            pic: "https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_0.png?width=1080&height=1080",
            pic2: "	https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_1.png?width=1080&height=1080",
            color_num: "N32",
          },
          {
            c: "#f6d0ab",
            pic: "https://sdcdn.io/mac/cn/mac_sku_MYH212_1x1_0.png?width=1080&height=1080",
            pic2: "	https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_1.png?width=1080&height=1080",
            color_num: "NC12",
          },
          {
            c: "#efb792",
            pic: "https://sdcdn.io/mac/cn/mac_sku_MYH218_1x1_0.png?width=1080&height=1080",
            pic2: "	https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_1.png?width=1080&height=1080",
            color_num: "NW13",
          },
          {
            c: "#efb084",
            pic: "https://sdcdn.io/mac/cn/mac_sku_MYH220_1x1_0.png?width=1080&height=1080",
            pic2: "	https://sdcdn.io/mac/cn/mac_sku_MYH222_1x1_1.png?width=1080&height=1080",
            color_num: "NC27",
          },
        ],
      ],

    };
  },
  methods: {
    //  移入
    changeIndex(e) {
      this[`showimg${e}`] = true;
    },
    // 移出
    changeIndexBack(e) {
      this[`showimg${e}`] = false;
    },
    change: function (index) {
      this.currentIndex = index;
    },
  },
};
</script>
<style lang="scss" scoped>
.product {
  width: 350px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin-right: 43px;
  margin-bottom: 50px;
  &:nth-child(3n) {
    margin-right: 0;
  }

  .pc-pic {
    border: 1px solid #ccc;
    border-bottom: none;

    > div {
      display: none;
      &.current {
        display: block;
      }
    }
    img {
      width: 340px;
      height: 340px;
      margin: 0 auto;
    }
    .pt-co {
      width: 100%;
      display: flex;
      transform: translateY(4px);
      li {
        width: 20%;
        height: 25px;
        &.active {
          border: 2px solid #444;
          transform: scaleY(1.3);
        }
      }
    }
  }
  .pc-detail {
    padding-top: 10px;
    height: 130px;
    display: flex;
    flex-direction: column;
    > p {
      color: #999;
      display: none;
      font-size: 12px;
      &.current {
        display: block;
      }
    }
    div {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      span {
        margin: 2px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &:nth-child(1) {
          font-size: 18px;
          font-weight: 700;
        }
        &:nth-child(2) {
          &:hover {
            color: #999;
          }
        }

        &:nth-child(3) {
          font-size: 16px;
          margin: 20px 0;
          font-weight: 700;
        }
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-between;
    ::v-deep .el-button {
      width: 200px;
      height: 60px;
    }
  }
}
</style>